<template>
    <div class="complete">
        <header class="complete-header">
            <div class="complete-header-wrap">
                <div class="header-left">
                    <i class="iconfont" @click="back">&#xe637;</i>
                </div>
                <div class="header-middle">
                    <p>资料完善</p>
                </div>
                <div class="header-right">
                    <span v-if="submitable" @click="completeInfo">保存</span>
                </div>
            </div>
        </header>
        <section class="complete-view">
            <Group title="头像">
                <m-img-uploader @selected="selectedAvatar"></m-img-uploader>
            </Group>
            <Group title="基本信息">
                <x-input title="用户昵称" placeholder="1-12个字符" v-model="info.nickName"></x-input>
                <x-input title="手机号" placeholder="11位有效号码" v-model="info.phone"></x-input>
            </Group>
        </section>
    </div>
</template>

<script>
    import {Group, XInput} from "vux";

    export default {
        data() {
            return {
                info: {
                    avatar: '',
                    nickName: '',
                    phone: ''
                }
            }
        },
        computed: {
            submitable() {
                for (let v in this.info) {
                    if (this.info[v].length === 0) {
                        return false;
                    }
                }
                return true;
            }
        },
        components: {
            Group,
            XInput
        },
        methods: {
            selectedAvatar(e) {
                this.info.avatar = e;
            },
            completeInfo() {
                const self = this;
                const data = {
                    avatar: this.info.avatar,
                    nickName: this.info.nickName,
                    phone: this.info.phone
                }
                this.$http.completeInfo(data).then(res => {
                    if (res.success === true) {
                        self.$store.dispatch("completeUserInfo", res.data);
                        self.$mToast('更新成功！');
                        self.goto('/index');
                    }
                }, error => {
                });
            }
        }
    }
</script>

<style lang="less" scoped>
    .complete {
        position: fixed;
        display: flex;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        flex-direction: column;
        .complete-header {
            position: fixed;
            top: 0px;
            right: 0px;
            left: 0px;
            z-index: 10;
            .complete-header-wrap {
                display: flex;
                align-items: center;
                height: 54px;
                background: #fff;
                box-shadow: 0px 1px 0px #eee;
                .header-left {
                    flex-basis: 20%;
                    i {
                        display: inline-block;
                        height: 40px;
                        width: 40px;
                        padding-left: 10px;
                        line-height: 40px;
                        font-size: 20px;
                    }
                }
                .header-middle {
                    flex: 1;
                    p {
                        text-align: center;
                        font-size: 16px;
                    }

                }
                .header-right {
                    position: relative;
                    flex-basis: 20%;
                    text-align: right;
                    span {
                        display: inline-block;
                        height: 40px;
                        width: 40px;
                        padding-right: 10px;
                        line-height: 40px;
                        font-size: 16px;
                    }
                }
            }
        }
        .complete-view {
            flex: 1;
            padding-top: 54px;
            overflow-x: hidden;
            overflow-y: auto;
        }
    }
</style>